<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Mucking Around</title>
    <LINK href="style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("#a").click(function(event){
            $('#b').visible = !($('#b').visible);
          });

          $('#getSrc').click(function(){
            $.ajax({
              url: "source.html",
              cache: false,
              success: function(html){
                $("#target").append(html);
              }
            });
          });

          $('#add-in').click(function(){
            $('#chat1').first().append('<div id="chat2" class="chat">chat2 text (should be in chat1)</div>');
          });

          $('#add-after').click(function(){
            $('#chat1').after('<div id="chat3" class="chat">chat 3 text (should be after chat1)</div>');
          });
        });

    </script>

</head>
<body>
Mucking around working on a new Wave replacement.

<u>Goals</u>:

<ol>
    <li>
        Be able to write text and have anyone else on the page see it without refreshing.
        <UL>
            <li>probably use some XMLHTTP goodness to hit the server at a set interval to check for updates</li>
            <li>maybe use REST for kicks?</li>
        </UL>
    </li>
</ol>

<div name="a" id="a" style="a" class="a">
  click me!
</div>

<div id="b">
    Peek a boo!
</div>

<div id="getSrc">
    Get source.
</div>

<div id="target">
    Old content
</div>

<div id="add-in">
  Add in
</div>

<div id="add-after">
  Add after
</div>

<div id="chat1" class="chat">
   This is chat 1
</div>

</body>
</html>